<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{:session('cp.cpsysname')}--商户管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="{:config('webconfig.description');}">
    <meta name="keywords" content="{:config('webconfig.keywords');}">
    <meta name="author" content="runoob">
    <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/bootstrap-datetimepicker.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/Statistics.css"/>
    <script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
    <script src="__STATIC_URL__/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="__STATIC_URL__/static/layer/3.0.3/layer.js"></script>
    <script src="__STATIC_URL__/static/js/commen.js"></script>

    <style type="text/css">
        .red {
            color: #FF6667;
        }

        .green {
            color: #66CC99;
        }

        .persont {
            font-size: 12px;
        }

        .card-box {
            height: 153px;

        }
        .table th, .table td {
            word-break: break-all;
        }
        .layui-laydate {

            z-index: 6666666 !important;

        }
        @media (min-width: 768px){
            .modal-dialog {
                width: 930px;
                margin: 30px auto;
            }
        }

    </style>
</head>
<body>
{include file='public/header'/}
<section>
    <!------------------导航-------------------------->
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">
        <div class="page-heading mgl15 mgr15">
            <ol class="breadcrumb">
                <li>当前位置是&nbsp;:</li>
                <li>
                    <a href="#">交易报表</a>
                </li>
                <li class="active">销售统计</li>
            </ol>
        </div>
        <div class="mgl15 mgr15">
            <div class="panel panel-default panel-search">
                <div class="panel-heading">
                    <h5 class="panel-title"><span class="glyphicon glyphicon-search pull-left"
                                                  style="margin-right: 10px;"></span>条件筛选</h5>
                </div>
                <div class="panel-body">
                    <form action="" class="form-horizontal table-search form-search" role="form" id="frm" >
                        <div class="col-sm-6  col-lg-4 ">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">门店：</label>
                                <div class="col-sm-9">
                                    <input type="hidden" name="type"  value="search"  >

                                    <input type="hidden" name="mchid" id="mach" value=""  >
                                    <input class="form-control" id="mac" style=" display: inline-block;" value="全部门店" data-target="#myModal3" data-toggle="modal"/>

                                    <!--<select name="machname" class="form-control" id="mach">-->
                                        <!--<option value="">所有门店</option>-->

                                    <!--</select>-->

                                </div>
                                <!--<div class="col-sm-3" style="margin-top: 5px;">-->
                                    <!--<a href="javascript:;"  class="btn-link">请选择</a>-->

                                <!--</div>-->
                            </div>
                        </div>


                        <div class="col-sm-6  col-lg-4 ">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">时间：</label>
                                <div class="col-sm-9">
                                    <div class="input-group">

                                        <input name="search_date" type="text" value=""
                                               readonly="readonly" id="search_date" class="form-control"
                                               placeholder="请选择" style="width: 297px">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="panel-footer">
                    <a href="javascript:;" class="btn btn-primary" onclick="searchform()">查找</a>
                    <a href="javascript:;" class="btn btn-default" onclick="clearform()">清空</a>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h5 class="panel-title" style="    display: inline-block;">
                        销售统计
                    </h5>
                    <a href="javascript:;" onclick="load();" class="btn btn-info" style="float: right;  margin-top: -7px;">点击下载</a>

                </div>
                <div class="panel-body">
                    <table class="table table-striped">
                        <thead>
                        <tr bgcolor="#eee">
                            <th>时间</th>
                            <!--<th>交易笔数</th>-->
                            <th>应收交易总额</th>
                            <th>实收金额</th>
                            <th>优惠金额</th>
                            <th>微信支付</th>
                            <th>支付宝支付</th>
                            <th>现金支付</th>
                            <th>会员卡支付</th>
                            <th>平均单价</th>
                            <th>退款金额</th>
                            <th>款台</th>
                            <th>收银员</th>
                        </tr>
                        </thead>
                        <tbody id="infos">

                          
                        </tbody>
                    </table>
                </div>
            </div>

        </div>

        {include file='public/footer'/}
    </div>
</section>
<!-- Modal -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document" style="    width: 600px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel3" style="font-size: 16px;">选择门店</h4>

            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <tr bgcolor="#eee">
                            <th></th>
                            <th>门店</th>

                        </tr>
                        <tbody id="templateHtml3">
                        <tr>
                            <td><input type="checkbox" name="merch" value="" data-mer="全部门店" id="whole"></td>

                            <td>全部门店</td>

                        </tr>
                        {volist name="mchlist" id="vo"}

                        <tr>
                            <td><input type="checkbox" name="merch" value="{$vo.mid}" data-mer="{$vo.merchant}"></td>

                            <td>{$vo.merchant}</td>

                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="btn();">确定</button>

            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel" style="font-size: 16px;">款台详情</h4>

            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <h3 style="text-align: center;">即将上线！</h3>
                    <!--<table class="table table-bordered">-->
                        <!--<tr bgcolor="#eee">-->
                            <!--<th>款台ID</th>-->
                            <!--<th>交易笔数</th>-->
                            <!--<th>应收交易总额</th>-->
                            <!--<th>实收金额</th>-->
                            <!--<th>优惠金额</th>-->
                            <!--<th>微信支付</th>-->
                            <!--<th>支付宝支付</th>-->
                            <!--<th>现金支付</th>-->
                            <!--<th>会员卡支付</th>-->
                            <!--<th>平均单价</th>-->
                            <!--<th>退款金额</th>-->
                        <!--</tr>-->
                        <!--<tbody id="templateHtml">-->
                        <!--<tr>-->
                            <!--<td>001</td>-->
                            <!--<td>10</td>-->
                            <!--<td>200</td>-->
                            <!--<td>10</td>-->
                            <!--<td>2</td>-->
                            <!--<td>10</td>-->
                            <!--<td>10</td>-->
                            <!--<td>10</td>-->
                            <!--<td>10</td>-->
                            <!--<td>10</td>-->
                            <!--<td>1</td>-->
                        <!--</tr>-->
                        <!--</tbody>-->
                    <!--</table>-->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<!-- 退款 详情Modal -->
<div class="modal fade" id="detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="tkdetailLabel" style="font-size: 16px;">收银员详情</h4>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <h3 style="text-align: center;">即将上线！</h3>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关 闭</button>
            </div>
        </div>
    </div>
</div>
<!--11-->
</body>


<script src="__STATIC_URL__/static/js/commen.js" type="text/javascript" charset="utf-8"></script>
<script src="__STATIC_URL__/static/laydate/laydate.js"></script>
<script>
    $("#whole").click(function(){
        selectAll();
    })
    function selectAll(){
        // console.log(1);
        // console.log($("#checkall").prop("checked"));
        if ($("#whole").prop("checked")) {
            // console.log(2);
            $("input[type='checkbox'][name='merch']").prop("checked",true);//全选
        } else {
            // console.log(3);
            $("input[type='checkbox'][name='merch']").prop("checked",false);  //取消全选
        }
    }
</script>
<script>
    $("#myModal").on("show.bs.modal",function(obj){

        var id = $(obj).data("id");

        // console.log(33,id);

        $.ajax({
            url:"{:url('pay/getpayinfo')}",
            type:"post",
            async:true,
            data:{
                id:id
            },
            success:function(data){
                // $("#templateHtml").html("");

                // console.log(36,data);
                var html="";
                var text=data;
                for (var i = 0; i < text.length; i++) {

                    html += '<tr>' +
                        '<td>' + text[i].statis_time + '</td>' +
                        '<td>' + text[i].real_fee + '</td>' +
                        '<td>' + text[i].z_yf_fee + '</td>' +
                        '<td>' + text[i].z_zk_fee + '</td>' +
                        '<td>' + text[i].wx_card_fee + '</td>' +
                        '<td>' + text[i].wx_fee + '</td>' +
                        '<td>' + text[i].wx_barcode_fee + '</td>' +
                        '<td>' + text[i].ali_fee + '</td>' +
                        '<td>' + text[i].ali_barcode_fee + '</td>' +
                        '<td>' + text[i].cash_fee + '</td>' +
                        '<td>' + text[i].z_refund_order + '</td>' +
                        '<td>' + text[i].z_refund_fee + '</td>' +
                        '<td>' + text[i].z_average_fee + '</td>' +
                        '<td>' + text[i].z_real_fee + '</td>' +
                        '</tr>';
                }
                // var html = template('modallist', datas);
                $("#templateHtml").html(html);
            }

        })

    });
</script>
<script>
    function load(filepath) {
        var mchid = $("#mach").val();
        var search_date = $("#search_date").val();
        $.ajax({
            url: "{:url('pay/reportform')}",
            data: {
                mchid:mchid,
                search_date:search_date,
                type: "out_excel"
            },
            dataType: "json",
            type: "post",
            success: function (res) {

                // console.log(999, res);
                var url = res;

                // var form = $("<form></form>").attr("action", url).attr("method", "post");
                // form.append($("<input></input>").attr("type", "hidden").attr("name", "filepath"));
                // form.appendTo('body').submit().remove();
                window.location.href=res;
            }
        })
    }
    function searchform(){

        getinfo();

    }
    //执行一个laydate实例
    // var s=laydate.now();
    laydate.render({
        elem: '#search_date',
        type: 'date',
        range: true,
        change: function (value, date, date2, data3) {
            var s = value.split(" - ");
            var startdate = new Date(s[0]).getTime();
            var enddate = new Date(s[1]).getTime();
            var ldate = Math.floor((enddate - startdate) / (24 * 3600 * 1000));
            if (ldate > 30) {
                layer.alert("日期区间不能大于30天");
                $("#search_date").val("");
            }
        }
    });
    $(function () {
        getinfo();
    });

    function getinfo() {
        var index = layer.load(0, {
            shade: [0.1,'#fff'] //0.1透明度的白色背景
        });
        // $('#infos').html("");
        $.ajax({
            url: "{:url('pay/reportform')}",
            data: $('#frm').serialize(),
            dataType: "json",
            type: "post",
            success: function (res) {
                layer.close(index);
                // console.log(333,res);
                var text=res;
                $('#infos').html("");
                var html="";



                for (var i = 0; i < text.length; i++) {

                     var order=parseInt(text[i].wx_order)+parseInt(text[i].wx_card_order)+parseInt(text[i].ali_order)+parseInt(text[i].cash_order);
                    html += '<tr>' +
                        '<td>' + text[i].statis_time + '</td>' +
                        // '<td>' + order + '</td>' +
                        '<td>' + text[i].ought_fee + '</td>' +
                        '<td>' + text[i].real_fee + '</td>' +
                        '<td>' + text[i].dis_fee + '</td>' +
                        '<td>' + text[i].wx_fee + '</td>' +
                        '<td>' + text[i].ali_fee + '</td>' +
                        '<td>' + text[i].cash_fee + '</td>' +
                        '<td>' + text[i].wx_card_fee + '</td>' +
                        '<td>' + text[i].avg_fee + '</td>' +
                        '<td>' + text[i].refund_fee + '</td>' +
                        '<td><a class="btn-link"  data-target="#myModal"  data-toggle="modal" data-id="">查看</a> </td>' +
                        '<td><a  class="btn-link"  data-target="#detail" data-toggle="modal" data-id="">查看</a></td>' +

                        '</tr>';
                }


                 $('#infos').html(html);
                var one=text[0].statis_time;
                var len=parseInt(text.length)-1;
                var las=text[len].statis_time;
                var time=las+" - "+one;
                $("#search_date").val(time);
                // console.log(333,time);
            }


        })


    }
</script>
<script>
    function btn(){
        $('#myModal3').modal('hide');

        var tempArray = new Array();
        var merarray= new Array();
        $("input:checkbox[name='merch']:checked").each(function (i) {

            tempArray[i] = $(this).val();
            merarray[i] = $(this).attr("data-mer");
        });

        var val = tempArray.join(',');
        // var mer=merarray.join(',');
        $("#mach").val(val);
        var html="";
        // for (var i = 0; i < merarray.length; i++) {
        //     html+='<span style="display:block">'+merarray[i]+'</span>'
        // }
        $("#mac").val(merarray);
// console.log(val,mer);
    }
</script>
</html>
